<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />
<meta name="description" content="分享个人的JavaScript学习经历,做最好的JavaScript资料分享站点" />
<meta content="三款漂亮的js日历控件,爱JavaScript中文网" name="keywords" />
<title>三款漂亮的js日历控件演示 - 爱JavaScript中文网</title>
	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/calendar.rc4.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
		window.addEvent('domready', function() { 
			myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} });
			myCal2 = new Calendar({ date2: 'Y/m/d' }, { classes: ['dashboard'], direction: 1, tweak: {x: 3, y: -3} });
			myCal3 = new Calendar({ date3: 'Y/m/d' }, { classes: ['i-heart-ny'], direction: 1, tweak: {x: 3, y: 0} });
		});
	//]]>
	</script>
	<link rel="stylesheet" type="text/css" href="css/iframe.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/dashboard.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/i-heart-ny.css" media="screen" />
</head>

<BODY>
	<h1>Style-able and semantic XHTML</h1>

	<p>
		I have tried to make Calendar as <strong>semantic</strong> as possible–with proper usage of <em>CAPTION, THEAD, TBODY, TH and TD</em> elements–and lots of <strong>CSS styling hooks</strong>. View the Calendar <a href="css/calendar.css" target="_blank">stylesheet</a> for examples of the <em>CSS</em>; see the <strong>Styling Your Calendar</strong> section in the Manual for references to the <em>XHTML</em>.

		<code>
			myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }});<br />
			myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1 });<br />
			myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1 }); 
		</code>		
	</p>

	<form action="/" class="long">
		<fieldset>
			
			<label for="date1">Date</label>
			<input id="date1" name="date1" type="text" />
		</fieldset>
	</form>

	<form action="/xxsfsd/aweee">
	<table>
		<tr>
				<td colspan="2" width="%100">
					<fieldset>
						<legend>Alternate styling: dashboard</legend>
						<label for="date2">Date1111</label>
						<input id="date2" name="date2" type="text" />
					</fieldset>
				</td>
			</tr>
			</table>
	</form>

	<form action="/">
		<fieldset>
			<legend>Alternate styling: i-heart-ny (experimental)</legend>

			<label for="date3">Date</label>
			<input id="date3" name="date3" type="text" />
		</fieldset>
	</form>
</BODY>
</HTML>

